// pages/tabbar/order/index.ts
import type { itemState } from '~/../typings/types/city'
import type { queryFormState } from '~/../typings/types/order'
import { doSubmit } from '~/api/order'
import { deepClone } from '~/utils/util'
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from "~/stores/app"
import { unique } from 'mobx-miniprogram/lib/internal'
function toast(title: string) {
  wx.showToast({
    icon: 'none',
    title
  })
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    queryForm: {
      sourceProvince: '',
      sourceCity: '',
      sourceArea: '',
      sourceAddress: '',
      destProvince: '',
      destCity: '',
      destArea: '',
      destAddress: '',
      deliveryMethod: '送至物流公司',
      deliverGoods: '自提',
      name: '',
      number: '',
      weight: '',
      volume: '',
      packaging: '',
      imageUrl: [],
    } as queryFormState,
  },
  handFast() {
    toast('未开放...')
  },
  handPriveImg() {
    const { queryForm } = this.data
    if (queryForm?.imageUrl) {
      wx.previewImage({
        urls: queryForm.imageUrl
      })
    }
  },
  isLogin(this: any, goLogin = true) {
    if (!this.data.userInfo?.id) {
      if (goLogin) {
        wx.navigateTo({
          url: '/pages/login/login',
        })
      }
      throw new Error('未登录')
    }
  },
  async handSubmit(this: any) {
    this.isLogin()
    const { queryForm } = this.data
    const params = deepClone(queryForm)
    if (!params.name) {
      toast('请录入货物信息')
      return
    }
    if (!params.sourceProvince) {
      toast('请选择发货城市')
      return
    }
    if (!params.destProvince) {
      toast('请选择收货城市')
      return
    }
    params.imageUrl = params.imageUrl.map((el: string) => {
      return {
        Url: el
      }
    })
    const data = await doSubmit(params)
    toast('下单成功')
    this.resetForm()
    setTimeout(() => {
      wx.navigateTo({
        url: `/pages/order/detail/detail?id=${data.id}`
      })
    }, 300)
  },
  resetForm() {
    const queryForm: queryFormState = {
      sourceProvince: '',
      sourceCity: '',
      sourceArea: '',
      sourceAddress: '',
      destProvince: '',
      destCity: '',
      destArea: '',
      destAddress: '',
      deliveryMethod: '送至物流公司',
      deliverGoods: '自提',
      name: '',
      number: '',
      weight: '',
      volume: '',
      packaging: '',
      imageUrl: [],
    }
    this.setData({
      queryForm
    })
  },
  handFa() {
    wx.navigateTo({
      url: '/pages/order/goods/goods'
    })
  },
  // input 双向绑定
  bindKeyInput(this: any, e: any) {
    const dataset = e.currentTarget.dataset
    const { queryForm } = this.data
    queryForm[dataset.params] = e.detail.value
    if (this.data.queryForm) {
      this.setData({
        queryForm
      })
    }
  },
  handOpen(this: any) {
    this.isLogin()
    this.formDia.open(this.data.queryForm)
  },
  handCity(e: any) {
    const dataset = e.currentTarget.dataset
    wx.navigateTo({
      url: '/pages/city/index?type=order',
      events: {
        chooseEvent: (e: itemState[]) => {
          const { queryForm } = this.data
          if (dataset.name === 'fa') {
            if (e.length === 3) {
              queryForm.sourceProvince = e[0].label
              queryForm.sourceCity = e[1].label
              queryForm.sourceArea = e[2].label
            } else if (e.length === 2) {
              queryForm.sourceProvince = e[0].label
              queryForm.sourceCity = e[1].label
              queryForm.sourceArea = ''
            } else if (e.length === 1) {
              queryForm.sourceProvince = e[0].label
              queryForm.sourceCity = ''
              queryForm.sourceArea = ''
            }
          } else {
            if (e.length === 3) {
              queryForm.destProvince = e[0].label
              queryForm.destCity = e[1].label
              queryForm.destArea = e[2].label
            } else if (e.length === 2) {
              queryForm.destProvince = e[0].label
              queryForm.destCity = e[1].label
              queryForm.destArea = ''
            } else if (e.length === 1) {
              queryForm.destProvince = e[0].label
              queryForm.destCity = ''
              queryForm.destArea = ''
            }
          }
          this.setData({
            queryForm
          })
        }
      }
    })
  },
  handSuccess(this: any, e: any) {
    const { queryForm } = this.data
    this.setData({
      queryForm: {
        ...queryForm,
        ...e.detail
      }
    })
  },
  deliveryMethodChange(e: any) {
    const dataset = e.currentTarget.dataset
    const { queryForm } = this.data
    queryForm.deliveryMethod = dataset.name
    this.setData({
      queryForm
    })
  },
  deliverGoods(e: any) {
    const dataset = e.currentTarget.dataset
    const { queryForm } = this.data
    queryForm.deliverGoods = dataset.name
    this.setData({
      queryForm
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(this: any) {
    this.storeBinding = createStoreBindings(this, {
      store,
      fields: {
        userInfo: 'userInfo',
      },
      actions: ['setUserInfo']
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady(this: any) {
    this.formDia = this.selectComponent("#formDia");
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload(this: any) {
    this.storeBinding.destroyStoreBindings();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})